// stylelint-disable declaration-no-important

//
// Text
//

.text-monospace { font-family: $font-family-monospace !important; }

// Alignment

.text-justify  { text-align: justify !important; }
.text-wrap     { white-space: normal !important; }
.text-nowrap   { white-space: nowrap !important; }
.text-truncate { @include text-truncate; }

// Responsive alignment

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

// Transformation

.text-lowercase  { text-transform: lowercase !important; }
.text-uppercase  { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }

// Weight and italics

.font-weight-light   { font-weight: $font-weight-light !important; }
.font-weight-lighter { font-weight: $font-weight-lighter !important; }
.font-weight-normal  { font-weight: $font-weight-normal !important; }
.font-weight-bold    { font-weight: $font-weight-bold !important; }
.font-weight-bolder  { font-weight: $font-weight-bolder !important; }
.font-italic         { font-style: italic !important; }

// Contextual colors

.text-white { color: $white !important; }

@each $color, $value in $theme-colors {
  @include text-emphasis-variant(".text-#{$color}", $value);
}

.text-body { color: $body-color !important; }
.text-muted { color: $text-muted !important; }

.text-black-50 { color: rgba($black, .5) !important; }
.text-white-50 { color: rgba($white, .5) !important; }

// Misc

.text-hide {
  @include text-hide($ignore-warning: true);
}

.text-decoration-none { text-decoration: none !important; }

.text-break { word-break: break-word !important; }

// Reset

.text-reset { color: inherit !important; }

@mixin font-size($font-size){
  font-size: $font-size !important;
}
@mixin text-align($text-align:center){
  text-align: $text-align;
}
@mixin text-color($primary){
color: $primary;
}
%text-primary{
  @include text-color($primary);
}
%text-white{
  @include text-color($white);
}
%text-secondary{
  @include text-color($secondary);
}
%text-red{
  @include text-color($red);
}
%font-size-12{
 @include font-size(12px); 
}
%font-size-14{
 @include font-size(14px); 
}
%font-size-16{
 @include font-size(16px); 
}
%font-size-18{
 @include font-size(18px); 
}
%font-size-20{
 @include font-size(20px); 
}
%font-size-24{
 @include font-size(24px); 
}
%font-size-30{
 @include font-size(30px); 
}
%font-size-48{
 @include font-size(48px); 
}
%font-size-144{
  @include font-size(144px); 
}
%text-align-center{
  @include text-align
}
%text-align-right{
  @include text-align(right)
}
.font-size-12{
  @extend %font-size-12
}
.font-size-14{
  @extend %font-size-14
}
.font-size-16{
  @extend %font-size-16
}
.font-size-18{
  @extend %font-size-18
}
.font-size-20{
  @extend %font-size-20
}
.font-size-24{
  @extend %font-size-24
}
.font-size-30{
  @extend %font-size-30
}

.font-size-48{
  @extend %font-size-48
}
.font-size-144{
  @extend %font-size-144
}

.text-align-center{
  @extend %text-align-center
}
.text-align-right{
  @extend %text-align-right
}
.md-text-align-right{
  @include media-breakpoint-up("md", $grid-breakpoints) {
     text-align: right;
  }
}
.text-primary{
  @extend %text-primary
}
.text-secondary{
  @extend %text-secondary
}
.text-white{
  @extend %text-white
}
.text-red{
  @extend %text-red
}
.no-border{
  border: none;
  outline: 0;
}